<template>
  <view class="phxx-item">
    <view class="phxx-item-content">
      <view class="bottom">
        <view class="items">
          <text class="til">账号:</text>
          <input class="val" :value="itemList.account" disabled />
        </view>
        <view class="items">
          <view class="til"><span style="color: red">*</span>原始密码:</view>
          <input
            class="val"
            v-model="itemList.originalPwd"
            placeholder="请输入6-16位原始密码"
            maxlength="16"
            :password="showOriginalPwd"
          />
          <image
            style="height: 25px; width: 30px"
            @click="toggleShowOriginalPwd"
            :src="showOriginalPwd ? closeEye : openEye"
          />
        </view>
        <view class="items">
          <view class="til"><span style="color: red">*</span>新密码:</view>
          <input
            class="val"
            v-model="itemList.newPwd"
            placeholder="请输入6-16位新密码"
            maxlength="16"
            :password="showNewPwd"
          />
          <image
            style="height: 25px; width: 30px"
            @click="toggleShowNewPwd"
            :src="showNewPwd ? closeEye : openEye"
          />
        </view>
        <view class="items">
          <view class="til"><span style="color: red">*</span>确认密码:</view>
          <input
            class="val"
            v-model="itemList.againPwd"
            placeholder="请输入6-16位确认密码"
            maxlength="16"
            :password="showAgainPwd"
          />
          <image
            style="height: 25px; width: 30px"
            @click="toggleShowAgainPwd"
            :src="showAgainPwd ? closeEye : openEye"
          />
        </view>
        <view class="error" v-if="passwordMismatch"
          ><span style="color: red"
            >确认密码与新密码不一致，请重新输入</span
          ></view
        >
        <view class="btns">
          <button type="primary" @click="handleClick">提 交</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { toast } from '@/utils/common';
import { editPwd } from '@/api/login.js';
import config from '@/config';
export default {
  data() {
    return {
      itemList: {
        account: this.$store.state.user.name,
        originalPwd: undefined,
        newPwd: undefined,
        againPwd: undefined
      },
      passwordMismatch: false,
      showOriginalPwd: true,
      showNewPwd: true,
      showAgainPwd: true
    };
  },
  computed: {
    openEye() {
      return config.baseImgUrl + '/eye.png';
    },
    closeEye() {
      return config.baseImgUrl + '/noeye.png';
    }
  },
  methods: {
    toggleShowOriginalPwd() {
      this.showOriginalPwd = !this.showOriginalPwd;
    },
    toggleShowNewPwd() {
      this.showNewPwd = !this.showNewPwd;
    },
    toggleShowAgainPwd() {
      this.showAgainPwd = !this.showAgainPwd;
    },
    validatePasswords() {
      const { originalPwd, newPwd, againPwd } = this.itemList;

      const validLength = (pwd) => pwd.length >= 6 && pwd.length <= 16;
      // const validFormat = pwd => /^[a-zA-Z0-9]{6,16}$/.test(pwd);

      if (!originalPwd || !validLength(originalPwd)) {
        toast('请输入6-16位原始密码');
        return false;
      }
      if (!newPwd || !validLength(newPwd)) {
        toast('请输入6-16位新密码');
        return false;
      }
      if (!againPwd || !validLength(againPwd)) {
        toast('请输入6-16位确认密码');
        return false;
      }
      // if (!validLength(originalPwd) || !validLength(newPwd) || !validLength(againPwd)) {
      //   toast('请输入6-16位密码');
      //   return false;
      // }
      // if (!validFormat(originalPwd) || !validFormat(newPwd) || !validFormat(againPwd)) {
      //   toast('密码只能包含字母和数字');
      //   return false;
      // }

      if (newPwd !== againPwd) {
        this.passwordMismatch = true;
        return false;
      }

      // 验证通过
      this.passwordMismatch = false;
      return true;
    },
    async handleClick() {
      if (this.validatePasswords()) {
        let data = {
          oldPassword: String(this.itemList.originalPwd),
          password: String(this.itemList.newPwd)
        };
        let res = await editPwd(data);
        if (res.code == 0) {
          toast('修改密码成功');
          setTimeout(() => {
            this.$tab.reLaunch('/pages/mine/index');
          }, 1000);
        } else {
          toast(res.msg);
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.phxx-item {
  width: 700rpx;
  padding: 10rpx 30rpx;
  box-sizing: border-box;
  margin: 20rpx auto 20rpx auto;
  border-radius: 20rpx;
  background: #fff;
  font-size: 26.66rpx;
  color: #000;
  .phxx-item-content {
    width: 644rpx;
    .bottom {
      padding: 10rpx 0 0 0;
      > .items {
        padding-bottom: 6rpx;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding-top: 15px;
      }
      .btns {
        button {
          width: 100%;
          height: 40px !important;
          margin-top: 50px;
          line-height: 40px !important;
          background-color: #409eff;
        }
      }
      .til {
        width: 25%;
        display: inline-block;
      }
      .val {
        margin-left: 30rpx;
        width: 75%;
        display: inline-block;
        border-radius: 5px;
        height: 30px;
      }
    }
  }
}
</style>
